<template>
   <div class="bigbox">
      <div class="person-header"><div class="person-head-name">金&nbsp;刚&nbsp;石&nbsp;文&nbsp;档</div></div>
        <div class="all">
            <div class="person-main-header">
            <router-link to="/home/workplace">桌面</router-link>
            <span>&nbsp;>&nbsp;个人信息</span>
            </div>
           <div class="person-main">
               <div class="person-main-main">
                    <div class="person-main-left"><div class="main-head">
                        <!-- <el-upload
                            class="avatar-uploader"
                            action="http://127.0.0.1:8000/user/putInfo"
                            :data="{uname:this.userInfo.name,intro:'',userid:this.userInfo.userid}"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                            <el-avatar :src="this.userInfo.portrait" :size="100"></el-avatar>
                        </el-upload> -->
                        <!-- 
                            <el-upload
                                class="avatar-uploader"
                                action=""
                                :show-file-list="false"
                                :http-request="upload_por"
                                :before-upload="beforeAvatarUpload">
                                <img v-if="form.img" :src="form.img" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                         -->
                       <el-upload
                            class="avatar-uploader"
                            action="http://127.0.0.1:8000/user/putInfo"
                            :data="{uname:this.userInfo.name,intro:'',userid:this.userInfo.userid}"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                            <el-avatar :src="this.userInfo.portrait" :size="100"></el-avatar>
                        </el-upload>
                       
                        <!-- 
                                <input type="file" @change="getImageFile" id="img">
                         -->
                        
                        </div></div>
                    <form class="person-main-right">
                        <div class="personInfo_style">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="el-icon-user-solid" style="font-size:20px"></span> 昵称&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" v-model="this.userInfo.name" class="person-input"> <span style="color:blue;font-size:12px;" @click="doChange">修改</span>
                        </div>
                        <div class="personInfo_name">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="el-icon-user" style="font-size:20px" ></span> 账户id&nbsp;<input type="email" v-model="this.userInfo.userid"  class="person-input"> </div>
                         <div class="personInfo_password">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="el-icon-lock" style="font-size:20px"></span> 微信&nbsp;&nbsp;&nbsp;&nbsp;<input type="text"  v-model="form.phone" readonly class="person-input"> </div>
                         <div class="personInfo_phone">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="el-icon-phone" style="font-size:20px"></span> 手机&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" v-model="form.wechat" readonly class="person-input"> </div>
                         <div class="personInfo_password">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="el-icon-message" style="font-size:20px"></span> 邮箱&nbsp;&nbsp;&nbsp;&nbsp;<input type="email" v-model="this.userInfo.acc"  class="person-input"> </div>
                        <div class="personInfo_style">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="el-icon-s-cooperation" style="font-size:20px"></span> 类型&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" v-model="form.style" readonly class="person-input"> </div>
                         
                    </form>
               </div>

              
               
           </div>
        </div>
        
   </div>
</template>

<script>

import {mapState,mapActions} from 'vuex'
import {reqChange,reqChange2,reqOutTeam,reqOutTeamMessage,reqSearchInviteUser,reqInviteUser,reqChangeAuth} from '../../api'
import axios from 'axios'
export default {
    name: "PersonInfo",
    data(){
        return{
         /*   userInfo:{
                name:this.userInfo.name,
                userid:this.userInfo.userid,
                password:this.userInfo.pwd,
                email:this.userInfo.acc,
                phone:"",
                style:"测试版",
                wechat:"未绑定",
                phone:"未绑定",
            },*/
           form:{
               wechat:"未绑定",
                phone:"未绑定",
               style:"测试版"
           },
            
        }
    },
    computed:{
    ...mapState(['userInfo']),
  },
  methods:{
      ...mapActions(['recordUserInfo']),
      doChange(){
          const result=reqChange()
      },
    handleAvatarSuccess(res, file) {
        console.log(res)
        console.log('sad')
        this.userInfo.portrait=res.portrait
     //   const imageUrl = URL.createObjectURL(file.raw);
        console.log('213213')
      //  this.userInfo.portrait=imageUrl
        console.log('2189655')
    //    console.log(imageUrl)
       // const result=this.reqChange(this.userInfo.name,"",imageUrl)
     //   console.log(result)
        //const result=reqChange2(this.userInfo.name,"",this.userInfo.portrait,this.userInfo.userid)
       // console.log(res)
        this.recordUserInfo(this.userInfo)
        console.log(this.userInfo)
        console.log(this.userInfo.portrait)
      },
    beforeAvatarUpload(file) {
            var is_pic = file.type=='image/jpeg' || file.type=='image/png';
            var isLt2M = file.size / 1024 / 1024 < 10;

            if (!is_pic) {
                this.alert_msg.error('请上传图片');
            }
            if (!isLt2M) {
                this.alert_msg.error('上传图片的大小不能超过 10MB');
            }
            
            return is_pic && isLt2M;
        },




  }
}

</script>
<style>
.bigbox{
    width:100%;
    height: 750px;
    background-color: #f7f7f7;
}
.person-header{
    width: 100%;
    background-color: #fff;
    height: 50px;
    overflow: hidden;
}
.person-head-name{
    font-size: 20px;
    margin-top: 15px;
    margin-left: 50px;
}
.all{
    width: 810px;
    margin: auto;
}
.person-main{
    width: 810px;
    height: 538px;
    background-color:white;
    
    margin: auto;
    margin-top: 64px;

 
}
.person-main-header{
    position: relative;
    top: 60px;
    left: 0;
    color: #363636;
    font-size: 14px;
    padding-bottom: 5px;
}
a{
    text-decoration: none;
    color: rgb(90, 90, 221);
    font-size: 15px;
}
.person-main-main{
    width: 756px;
    height: 340px;
    background-color: #fff;
    position: relative;
    top:85px;
    left: 53.5px;
   overflow: hidden;
   
}
.person-main-left{
    width:157px;
    height: 340px;
    float: left;
  
    border-right: solid 1px gray;
}
.person-main-right{
    width:600px;
    height: 340px;
    
 
    margin-left: 157px;
}
.main-head{
    margin-top: 70px;
    margin-left: 30px;

}

.person-input{
    height: 25px;
    width: 200px;
    margin-bottom: 20px;
}
</style>